<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>聊天页面-信息列表</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #f2efed;
            line-height: 1;
        }
        /*成员列表*/

        .group_members_box {
            margin: 0 0 0.45rem 0;
            background-image: none;
        }

        .member_list_box {
            background-image: none!important;
            padding-bottom: 0.5rem!important;
        }

        .member_info_box {
            width: 20%;
            text-align: center;
        }

        .member_info_box img {
            padding: 0.375rem 0;
        }

        .member_info_box div {
            color: #333;
            font-size: 0.7rem;
            line-height: 0.7rem;
            height: 0.7rem;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /*群聊设置*/

        .group_set_box {
            margin: 0.45rem 0;
        }

        .group_name_box,
        .to_top_box,
        .no_msg_box {
            padding: 0.7rem;
            display: flex;
            background-color: #fff;
            align-items: center;
            position: relative;
        }

        .to_top_box,
        .no_msg_box {
            padding: 0.3rem 0.7rem;
        }

        .to_top_box::after,
        .no_msg_box::after {
            content: "";
            height: 1px;
            width: calc(100% - 0.75rem);
            background-color: #e6e6e6;
            position: absolute;
            bottom: 0;
            right: 0;
        }

        .left_title,
        .right_cnt {
            font-size: 0.7rem;
            color: #333;
        }

        .left_title {
            flex: 1;
        }

        .right_cnt {
            flex: 2;
        }

        .right_txt {
            text-align: right;
        }

        .right_btn {
            background-color: #e5e5e5;
            display: flex;
            align-items: center;
            width: 2.5rem;
            height: 1.5rem;
            border-radius: 2.5rem;
            position: relative;
        }

        .right_btn.active {
            background-color: #4dd865;
        }

        .right_btn span {
            width: 1.4rem;
            height: 1.4rem;
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            left: 3%;
        }

        .right_btn span.active {
            left: calc(97% - 1.4rem);
        }
        /*退出群聊按钮*/

        .send_msg {
            width: 80%;
            margin: auto;
            margin-top: 2.05rem;
            text-align: center;
            color: #fff;
            background-color: #f23030;
            padding: 0.625rem;
            border-radius: 1rem;
            font-size: 0.8rem;
            font-weight: 600;
        }
    </style>
</head>

<body>
    <div class="app" style="padding-top:0.45rem;">
        <!-- 群聊成员 -->
        <ul class="aui-list aui-media-list group_members_box">
            <li class="aui-list-item member_list_box">
                <div class="aui-list-item-inner">
                    <div class="aui-row aui-row-padded">
                        <div v-for="member_info in member_data" class="aui-col-xs-5 member_info_box">
                            <!-- <img :src="member_info.head_img" style="min-height:2.7rem;"/> -->
                            <div :style="'background:url('+member_info.head_img+') no-repeat center/cover;width:3rem;height:3rem;margin:0.375rem 0;'"></div>
                            <div>{{member_info.username}}</div>
                        </div>
                        <div class="aui-col-xs-5 member_info_box" onclick="open_new_win('thr','选择联系人','确认','添加')">
                            <!-- <img src="../../image/four/jia_member.png" /> -->
                            <div style="background:url(../../image/four/jia_member.png) no-repeat center/cover;width:3rem;height:3rem;margin:0.375rem 0;"></div>
                        </div>
                        <div v-if="group_detail_info.initiate_type==1" class="aui-col-xs-5 member_info_box" onclick="open_new_win('thr','选择联系人','确认','移除')">
                            <!-- <img src="../../image/four/jian_member.png" /> -->
                            <div style="background:url(../../image/four/jian_member.png) no-repeat center/cover;width:3rem;height:3rem;margin:0.375rem 0;"></div>
                        </div>

                    </div>
                </div>
            </li>
        </ul>



        <!-- 群聊设置 -->
        <div class="group_set_box">
            <div class="to_top_box">
                <div class="left_title">聊天置顶</div>
                <div class="right_btn" :class="{active:group_detail_info.message_top==1,active:to_top}" @click="to_top_msg()">
                    <span :class="{active:group_detail_info.message_top==1,active:to_top}"></span>
                </div>
            </div>
            <div class="no_msg_box">
                <div class="left_title">消息免打扰</div>
                <div class="right_btn" :class="{active:group_detail_info.message_disturb==1,active:to_mdr}" @click="to_mdr_msg()">
                    <span :class="{active:group_detail_info.message_disturb==1,active:to_mdr}"></span>
                </div>
            </div>
            <div class="group_name_box" @click="open_new_win('thr','群名称','保存','修改群名',group_detail_info.name)">
                <div class="left_title">群聊名称</div>
                <div class="right_cnt right_txt">{{group_detail_info.name}}</div>
            </div>
        </div>


        <!-- 退出群聊按钮 -->
        <div class="send_msg" onclick="remove_my_self()">退出群聊</div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">
    var rong;
    apiready = function() {

        // 初始化融云
        rong = api.require('rongCloud2');
        rong.init(function(ret, err) {
            if (ret.status == 'success') {
                // console.log('初始化融云成功了')
            } else {
                api.toast({
                    msg: err.code
                });
            }
        });
        // 连接融云
        rong.connect({
            token: $api.getStorage('rong-token')
        }, function(ret, err) {
            if (ret.status == 'success') {
                // console.log('融云连接成功——————————' + JSON.stringify(ret));
            } else {
                alert(err.code)
            }
        });

        // 实例化vue 渲染群组详细资料
        var group_detail = new Vue({
            el: '.app',
            data: {
                group_detail_info: [],
                member_data: [],
                to_top: false,
                to_mdr: false
            },
            mounted: function() {
                var $_this = this;
                $_this.get_group_detail();
            },
            methods: {
                // 请求群组详细信息接口
                get_group_detail: function() {
                    var $_this = this;
                    api.ajax({
                        url: window.Url.Community_groupchatDetails,
                        method: 'post',
                        data: {
                            values: {
                                token: $api.getStorage('user_data').token,
                                keywords: "",
                                groupchat_id: api.pageParam.group_chat_id
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {
                            console.log("获取到群组详细信息数据-----" + JSON.stringify(ret));
                            if (ret.re == 1) {
                                $_this.group_detail_info = ret.data;
                                $_this.member_data = ret.data.list;
                                // 判断当前的消息置顶和消息免打扰的状态
                                if ($_this.group_detail_info.message_top != 0) {
                                    $_this.to_top = true;
                                }
                                if ($_this.group_detail_info.message_disturb != 0) {
                                    $_this.to_mdr = true;
                                }
                            }
                        } else {
                            alert(JSON.stringify(err));
                        }
                    });

                },


                // 置顶和消息免打扰
                to_top_msg: function() {
                    var $_this = this;
                    $_this.to_top = !$_this.to_top;
                    $_this.set_group_msg_state();

                },
                to_mdr_msg: function() {
                    var $_this = this;
                    $_this.to_mdr = !$_this.to_mdr;
                    $_this.set_group_msg_state();
                },

                set_group_msg_state: function() {
                    var $_this = this;
                    var top_num = 0;
                    var mdr_num = 0;
                    if ($_this.to_top) {
                        top_num = 1;
                        rong.setConversationToTop({
                            conversationType: 'GROUP',
                            targetId: api.pageParam.group_chat_id,
                            isTop: true
                        }, function(ret, err) {
                            if (ret.status == 'success') {
                                console.log('融云设置置顶消息成功')
                            } else {
                                api.toast({
                                    msg: '融云置顶消息失败'
                                });
                            }
                        })
                    } else {
                        top_num = 0;
                        rong.setConversationToTop({
                            conversationType: 'GROUP',
                            targetId: api.pageParam.group_chat_id,
                            isTop: false
                        }, function(ret, err) {
                            if (ret.status == 'success') {
                                console.log('融云取消置顶消息成功')
                            } else {
                                api.toast({
                                    msg: '融云置顶消息失败'
                                });
                            }
                        })
                    }

                    if ($_this.to_mdr) {
                        mdr_num = 1;
                        rong.setConversationNotificationStatus({
                            conversationType: 'GROUP',
                            targetId: api.pageParam.group_chat_id,
                            notificationStatus: 'DO_NOT_DISTURB'
                        }, function(ret, err) {
                            if (ret.status == 'success') {
                                console.log('融云免打扰开启')
                            } else {
                                api.toast({
                                    msg: err.code
                                });
                            }
                        })
                    } else {
                        mdr_num = 0;
                        rong.setConversationNotificationStatus({
                            conversationType: 'GROUP',
                            targetId: api.pageParam.group_chat_id,
                            notificationStatus: 'NOTIFY'
                        }, function(ret, err) {
                            if (ret.status == 'success') {
                                console.log('融云免打扰取消')
                            } else {
                                api.toast({
                                    msg: err.code
                                });
                            }
                        })
                    }

                    api.ajax({
                        url: window.Url.Community_editFriend,
                        method: 'post',
                        data: {
                            values: {
                                type: 2,
                                token: $api.getStorage('user_data').token,
                                groupchat_id: api.pageParam.group_chat_id,
                                message_top: top_num,
                                message_disturb: mdr_num
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {
                            // alert(JSON.stringify(ret));
                            console.log('群组消息置顶或免打扰设置成功')
                        } else {
                            alert(JSON.stringify(err));
                        }
                    });
                }
            }
        })

    };



    // 打开对应页面的头部
    function open_new_win(index, title, right_txt, type, group_name) {
        api.openWin({
            name: 'four_' + index + "header",
            url: './four_headers/four_' + index + '_header.html',
            pageParam: {
                title: title,
                right_txt: right_txt,
                type: type,
                group_name: group_name,
                group_chat_id: api.pageParam.group_chat_id
            }
        });
    }


    // 删除并退出群聊哦
    function remove_my_self() {
        api.ajax({
            url: window.Url.Community_setGroupchatUser,
            method: 'post',
            data: {
                values: {
                    token: $api.getStorage('user_data').token,
                    user_ids: "-" + $api.getStorage('user_data').user_id + "-",
                    groupchat_id: api.pageParam.group_chat_id,
                    type: 2
                }
            }
        }, function(ret, err) {
            if (ret) {
                console.log("退出群聊-----------" + JSON.stringify(ret));
                api.toast({
                    msg: ret.info,
                    duration: 2000,
                    location: 'bottom'
                });

                setTimeout(function() {
                    api.closeWin({});
                }, 2000)

                api.execScript({
                    name: 'group_chat_header',
                    script: 'close_win();'
                });

                api.execScript({
                    name: 'four_one_header',
                    frameName: 'my_chat_group',
                    script: 'window.location.reload()'
                });


                if (ret.re == 1) {
                    rong.removeConversation({
                        conversationType: 'GROUP',
                        targetId: api.pageParam.group_chat_id
                    }, function(ret, err) {
                        // api.toast({
                        //     msg: ret.status
                        // });
                        console.log("清除当前群聊的会话信息成功");
                        api.execScript({
                            name: 'four_frame/four_index.html',
                            frameName: 'chat_list',
                            script: 'window.location.reload();'
                        });

                    })
                }

            } else {
                alert(JSON.stringify(err));
            }
        });

    }
</script>

</html>
